<template>
  <div>
    <!-- 综合查询表单 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="菜单名称">
        <el-input v-model="formInline.menuName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="菜单状态">
        <el-select v-model="formInline.visible" placeholder="请选择">
          <el-option label="显示" value="0"></el-option>
          <el-option label="隐藏" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 综合查询 -->
    <el-button type="primary" plain>主要按钮</el-button>
    <el-button type="success" icon="el-icon-refresh" @click="querymenu" plain
      >刷新</el-button
    >
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="menuId"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="menuName" label="菜单名称" sortable width="180">
      </el-table-column>

      <el-table-column prop="orderNum" label="显示顺序" sortable width="180">
      </el-table-column>
      <el-table-column prop="path" label="请求地址" sortable width="180">
      </el-table-column>
      <el-table-column
        prop="menuType"
        label="菜单类型"
        :formatter="formatRole"
        sortable
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="visible"
        label="菜单状态"
        :formatter="formatvisible"
        sortable
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="perms"
        label="权限标识"
        :formatter="formatperms"
        sortable
        width="180"
      >
      </el-table-column>
      <el-table-column prop="" label="操作" fixed="right" width="130">
        <template slot-scope="scope">
          <el-button
            type="danger"
            @click="deleteUser(scope.row)"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            type="primary"
            @click="querybyid(scope.row)"
            icon="el-icon-edit"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getmenu, zhcx } from "@/api/menu";
export default {
  data() {
    return {
      //综合查询表单
      formInline: {
        menuName: "",
        visible: ""
      },
      tableData: []
    };
  },
  //网页加载事件
  mounted: function() {
    this.querymenu();
  },
  methods: {
    //综合查询按钮
    onSubmit() {
      zhcx(this.formInline).then(response => {
        console.log(response.data);
        if (response.code === 20000) {
          this.tableData = response.data;
        }
      });
    },
    formatRole: function(row, column) {
      return row.menuType == "M"
        ? "目录"
        : row.menuType == "C"
        ? "菜单"
        : row.menuType == "F"
        ? "按钮"
        : "";
    },
    formatvisible: function(row, column) {
      return row.visible == "0" ? "显示" : row.visible == "1" ? "隐藏" : "";
    },
    formatperms: function(row, column) {
      return row.perms == "" ? "-" : row.perms;
    },
    //根据id查询按钮
    querybyid(row) {
      console.log(row);
    },
    //删除按钮
    deleteUser(row) {
      console.log(row);
    },
    //菜单表查询所有
    querymenu() {
      getmenu().then(response => {
        console.log(response.data);
        this.tableData = response.data;
      });
    }

    // load(tree, treeNode, resolve) {
    //   setTimeout(() => {
    //     resolve([]);
    //   }, 1000);
    // }
  }
};
</script>

<style lang="scss" scoped>
</style>